/**
 * 全程机械化作业服务
 * @name section-agriculture-appoint
 */
Vue.component('section-agriculture-appoint', {
    template: `
        <dp-section2 title="全程机械化作业服务" height="30%">
            <template #other>
                <span class="more-btn" @click="moreBtnClick">更多>></span>
            </template>
            <div class="section-agriculture-appoint">
                <div class="section-box">
                    <div class="section-box-left">耕</div>
                    <div class="section-box-right">
                        <span>旋耕机</span>
                        <p>
                            <span>4</span>
                            <span>台</span>
                        </p>
                    </div>
                </div>
                <p><img src="../../resources/img/jiangshan/right.png" alt=""></p>
                <div class="section-box">
                    <div class="section-box-left">种</div>
                    <div class="section-box-right">
                        <span>插秧机</span>
                        <p>
                            <span>9</span>
                            <span>台</span>
                        </p>
                    </div>
                </div>
                <p><img src="../../resources/img/jiangshan/right.png" alt=""></p>
                <div class="section-box">
                    <div class="section-box-left">管</div>
                    <div class="section-box-right">
                        <span>无人机</span>
                        <p>
                            <span>3</span>
                            <span>架</span>
                        </p>
                    </div>
                </div>
                <p></p>
                <p></p>
                <p></p>
                <p></p>
                <p><img src="../../resources/img/jiangshan/down.png" alt=""></p>
                <div class="section-box">
                    <div class="section-box-left">碾</div>
                    <div class="section-box-right">
                        <span>碾米机</span>
                        <p>
                            <span>4</span>
                            <span>台</span>
                        </p>
                    </div>
                </div>
                <p><img src="../../resources/img/jiangshan/left.png" alt=""></p>
                <div class="section-box">
                    <div class="section-box-left">烘</div>
                    <div class="section-box-right">
                        <span>烘干机</span>
                        <p>
                            <span>6</span>
                            <span>台</span>
                        </p>
                    </div>
                </div>
                <p><img src="../../resources/img/jiangshan/left.png" alt=""></p>
                <div class="section-box">
                    <div class="section-box-left">收</div>
                    <div class="section-box-right">
                        <span>收割机</span>
                        <p>
                            <span>6</span>
                            <span>台</span>
                        </p>
                    </div>
                </div>
            </div>
            <dialog-com :visible.sync="dialogVisible" title="全程机械化作业服务" v-bind="dialogParams"></dialog-com>
        </dp-section2>
    `,
    props: {},
    data() {
        return {
            // 弹窗显示隐藏
            dialogVisible: false,
            dialogParams: {
                dialogType: "qcjxhzyfw-com"
            }
        };
    },
    computed: {

    },
    watch: {},
    methods: {
        /**
         * 更多点击
         */
        moreBtnClick() {
            this.dialogVisible = true;
        }
    },
    mounted() {

    }
});

/**
 * 集中育苗 | 农事托管
 * @name section-machinery-schedule
 */
Vue.component('section-machinery-schedule', {
    template: `
        <dp-section2 title="" height="25%"> 
            <template #left>
                <div class="title-box-left">
                    <span @click="titleActive = item.active" v-for="(item,index) in titleList" :key="index" :class="{active:item.active === titleActive}">{{item.title}}</span>
                </div>
            </template>
            <template #other>
                <span class="more-btn" @click="moreBtnClick">更多>></span>
            </template>
            <div class="section-machinery-schedule" v-show="titleActive == 0">
                <div class="jzym-box">
                    <div class="jzym-box-top">
                        <img src="../../resources/img/jiangshan/blue.png" alt="">
                    </div>
                    <p>
                        <span>11262</span>
                        <span>亩</span>
                    </p>
                    <span>预计秧苗播种面积</span>
                </div>
                <div class="jzym-box">
                    <div class="jzym-box-top">
                        <img src="../../resources/img/jiangshan/green.png" alt="">
                    </div>
                    <p>
                        <span>18</span>
                        <span>个</span>
                    </p>
                    <span>育秧床总数</span>
                </div>
                <div class="jzym-box">
                    <div class="jzym-box-top">
                        <img src="../../resources/img/jiangshan/yellow.png" alt="">
                    </div>
                    <p>
                        <span>12</span>
                        <span>个</span>
                    </p>
                    <span>已使用</span>
                </div>
            </div>    
            <div class="section-machinery-schedule section-machinery-schedule2" v-show="titleActive == 1">
                <div class="jzym-box">
                    <div class="jzym-box-top">
                        <img src="../../resources/img/jiangshan/ns-blue-icon.png" alt="">
                    </div>
                    <p>
                        <span>102</span>
                        <span>次</span>
                    </p>
                    <span>保姆式托管</span>
                </div>
                <div class="jzym-box">
                    <div class="jzym-box-top">
                        <img src="../../resources/img/jiangshan/ns-green-icon.png" alt="">
                    </div>
                    <p>
                        <span>96</span>
                        <span>次</span>
                    </p>
                    <span>菜单式托管</span>
                </div>
                <div class="jzym-box">
                    <div class="jzym-box-top">
                        <img src="../../resources/img/jiangshan/ns-yellow-icon.png" alt="">
                    </div>
                    <p>
                        <span>1021</span>
                        <span>次</span>
                    </p>
                    <span>点单式托管</span>
                </div>
            </div>
            <dialog-com :visible.sync="dialogVisible" v-bind="dialogParams"></dialog-com>
        </dp-section2>
    `,
    props: {

    },
    data() {
        return {
            // 头部列表
            titleList: [
                {
                    title: "集中育苗",
                    active: 0
                },
                {
                    title: "农事托管",
                    active: 1
                }
            ],
            // 头部选中
            titleActive: 0,
            // 弹框显示隐藏
            dialogVisible: false
        };
    },
    computed: {
        // 弹框传参
        dialogParams() {
            return {
                dialogType: "jzymnstg-com",
                list: this.titleList
            };
        }
    },
    watch: {

    },
    methods: {
        /**
         * 更多点击
         */
        moreBtnClick() {
            this.dialogVisible = true;
        }
    },
    mounted() {

    }
});

/**
 * 农资配送 | 农业废弃物回收
 * @name agricultural-material-distribution
 */
Vue.component('agricultural-material-distribution', {
    template: `
        <dp-section2 title="" height="45%"> 
            <template #left>
                <div class="title-box-left">
                    <span @click="titleActive = item.active" v-for="(item,index) in titleList" :key="index" :class="{active:item.active === titleActive}">{{item.title}}</span>
                </div>
            </template>
            <template #other>
                <span class="more-btn" @click="moreBtnClick">更多>></span>
            </template>
            <div class="agricultural-material-distribution" v-show="titleActive == 0">
                <div class="nzps-content-top" v-line>
                    <div class="nzps-top-box">
                        <span>认证农资店</span>
                        <span><span>68</span>家</span>
                    </div>
                    <div class="nzps-top-box">
                        <span>认证商品</span>
                        <span><span>836</span>种</span>
                    </div>
                    <div class="nzps-top-box">
                        <span>配送次数</span>
                        <span><span>5033</span>次</span>
                    </div>
                    <div class="nzps-top-box">
                        <span>农药领用登记</span>
                        <span><span>159</span>次</span>
                    </div>
                </div>
                <div class="nzps-content-bottom">
                    <span>热销农资</span>
                    <div class="nzps-bottom-box">
                        <div class="swiper nzpsSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item,index) in rxnzList" :key="index + 'rxnz'"">
                                    <div class="rxnz-img">
                                        <img :src="item.img" alt="">
                                    </div>
                                    <div class="rxnz-right">
                                        <span>{{item.name}}</span>
                                        <span>{{item.company}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>     
            <div class="agricultural-material-distribution" v-show="titleActive == 1">
                <div class="nyfqw-content-top">
                    <div class="nyfqw-top-box">
                        <p>
                            <span><span>6536</span>吨</span>
                            <span>废弃物回收总量</span>
                        </p>
                    </div>
                    <div class="nyfqw-top-box">
                        <p>
                            <span><span>25</span>种</span>
                            <span>回收废弃物分类</span>
                        </p>
                    </div>
                    <div class="nyfqw-top-box">
                        <p>
                            <span><span>1006523</span>分</span>
                            <span>回收积分发放</span>
                        </p>
                    </div>
                </div>
                <div class="nyfqw-content-bottom">
                    <div id="nyfqw-chart">
                        <top-chart v-if="titleActive == 1" :option="chartOption"></top-chart>
                    </div>
                </div>
            </div>
            <dialog-com :visible.sync="dialogVisible" v-bind="dialogParams"></dialog-com>
        </dp-section2>
    `,
    props: {
        station_id: { type: [String, Number] }
    },
    data() {
        return {
            // 头部列表
            titleList: [
                {
                    title: "农资配送",
                    active: 0
                },
                {
                    title: "农业废弃物回收",
                    active: 1
                }
            ],
            // 头部选中
            titleActive: 0,
            // 热销农资列表
            rxnzList: [
                {
                    img: "../../resources/img/jiangshan/nz-demo.png",
                    name: "刘记晶体尿素",
                    company: "武威金仓生物科技有限公司"
                },
                {
                    img: "../../resources/img/jiangshan/nz-demo.png",
                    name: "云天牌有机肥",
                    company: "武威金仓生物科技有限公司"
                },
                {
                    img: "../../resources/img/jiangshan/nz-demo.png",
                    name: "鲁西晶体尿素",
                    company: "武威金仓生物科技有限公司"
                },
                {
                    img: "../../resources/img/jiangshan/nz-demo.png",
                    name: "刘记晶体尿素",
                    company: "武威金仓生物科技有限公司"
                },
            ],

            // 弹窗显示隐藏
            dialogVisible: false
        };
    },
    computed: {
        /*图表配置*/
        chartOption() {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0, 34, 39, 0.70)",
                    borderWidth: 0,
                    formatter: function (params) {
                        return `
                            <div class="chart-tootip-box">
                                <span>${params[0].name}</span>
                                <p>
                                    <span>${params[0].seriesName}：</span>
                                    <span><span>${params[0].value}</span>次</span>
                                </p>
                            </div>
                        `;
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '0',
                    right: '4%',
                    bottom: '3%',
                    top: '30',
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#fff"
                    },
                    data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
                },
                yAxis: [
                    {
                        name: '单位：次',
                        type: 'value',
                        nameTextStyle: {
                            fontFamily: "SourceHanSansCNRegular",
                            color: "#00EAFF",
                            align: "left"
                        }
                    }
                ],
                series: [
                    {
                        name: '回收服务',
                        type: 'line',
                        smooth: false,
                        data: [7, 8, 8, 11, 6],
                        barWidth: 20,
                        itemStyle: {
                            color: "#00EAFF"
                        }
                    }
                ]
            };

            return option;
        },
        dialogParams() {
            return {
                list: this.titleList,
                dialogType: "nzpsnyfqphs-com",
            };
        }
    },
    watch: {

    },
    methods: {
        /**
         * 初始化热销农资轮播
         */
        initRxnzSwiper() {
            var swiper = new Swiper(".nzpsSwiper", {
                direction: "vertical",
                slidesPerView: "auto",
                spaceBetween: 15,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            });
        },
        /**
         * 点击更多
         */
        moreBtnClick() {
            this.dialogVisible = true;
        }
    },
    mounted() {
        this.initRxnzSwiper();
    }
});

/**
 * 监测设备 | 设备告警
 * @name section-technical-service
 */
Vue.component('section-technical-service', {
    template: `
        <dp-section2 title="" height="33%"> 
            <template #left>
                <div class="title-box-left">
                    <span @click="titleActive = item.active" v-for="(item,index) in titleList" :key="index" :class="{active:item.active === titleActive}">{{item.title}}</span>
                </div>
            </template>
            <template #other>
                <span class="more-btn" @click="moreBtnClick">更多>></span>
            </template>
            <div class="monitor-device" v-show="titleActive == 0">
                <div class="jcsb-top" v-line>
                    <div class="jcsb-top-box">
                        <span>65</span>
                        <span>设备总数</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>15</span>
                        <span>在线数</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>30</span>
                        <span>离线数</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>20</span>
                        <span>故障数</span>
                    </div>
                </div>
                <div class="jcsb-bottom">
                    <div class="swiper myjcsbSwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="(item,index) in 6" :key="index">
                                <div class="jcsb-device-icon">
                                    <i class="tp-icon-sensor-180"></i>
                                </div>
                                <div class="jcsb-device-name">
                                    <p>
                                        <span>22</span>
                                        <span>℃</span>
                                    </p>
                                    <span>空气温度</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div> 
            <div class="monitor-device monitor-device2" v-show="titleActive == 1">
                <div class="jcsb-top" v-line>
                    <div class="jcsb-top-box">
                        <span>16<span> 条</span></span>
                        <span>未处理告警数</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>6<span> 条</span></span>
                        <span>今日告警数</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>3<span> 条</span></span>
                        <span>今日未处理数</span>
                    </div>
                </div>
                <div class="sbgj-table">
                    <div class="sbgj-table-head">
                        <p>告警类型</p>
                        <p>告警详情</p>
                        <p>告警状态</p>
                    </div>
                    <div class="sbgj-table-body">
                        <div class="swiper sbgjSwiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" v-for="(item,index) in deviceWarnList" :key="index + 'warn'"">
                                    <p>{{item.title}}</p>
                                    <p>{{item.content}}</p>
                                    <p :style="{color:item.status == 1?'#3AFFA5':'#FFBD1D'}">{{item.status == 1?'已处理':'未处理'}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <dialog-com v-bind="dialogParams" :visible.sync="dialogVisible"></dialog-com>
        </dp-section2>
    `,
    props: {

    },
    data() {
        return {
            // 头部列表
            titleList: [
                {
                    title: "监测设备",
                    active: 0
                },
                {
                    title: "设备告警",
                    active: 1
                }
            ],
            // 头部选中
            titleActive: 0,
            // 更多弹框显示隐藏
            dialogVisible: false,
            // 设备告警列表
            deviceWarnList: [
                {
                    title: "空气温度偏低",
                    content: "2023/11/18 9:00",
                    status: "1"
                },
                {
                    title: "空气温度偏高",
                    content: "2023/11/19 10:00",
                    status: "0"
                },
                {
                    title: "土壤湿度偏高",
                    content: "2023/11/20 9:00",
                    status: "0"
                },
                {
                    title: "土壤湿度偏高",
                    content: "2023/11/20 9:00",
                    status: "1"
                },
                {
                    title: "土壤湿度偏高",
                    content: "2023/11/20 9:00",
                    status: "0"
                },
            ]
        };
    },
    computed: {
        // 弹框配置
        dialogParams() {
            return {
                dialogType: "jcsbsbgj-com",
                list: this.titleList
            };
        }
    },
    watch: {

    },
    methods: {
        /**
         * 初始化检测设备轮播
         */
        initMonitorDeviceSwiper() {
            var swiper = new Swiper(".myjcsbSwiper", {
                slidesPerView: 2,
                grid: {
                    rows: 2,
                },
                spaceBetween: 10,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            });
        },
        /**
         * 初始化设备告警轮播
         */
        initDeviceWarnSwiper() {
            var swiper = new Swiper(".sbgjSwiper", {
                direction: "vertical",
                slidesPerView: "auto",
                spaceBetween: 0,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            });
        },
        /**
         * 点击更多
         */
        moreBtnClick() {
            this.dialogVisible = true;
        }
    },
    mounted() {
        this.initMonitorDeviceSwiper();
        this.initDeviceWarnSwiper();
    }
});

/**
 * 农技服务 | 农机维修
 * @name section-farm-tasks
 */
Vue.component('section-farm-tasks', {
    template: `
        <dp-section2 title="" height="40%">
            <template #left>
                <div class="title-box-left">
                    <span @click="titleActive = item.active" v-for="(item,index) in titleList" :key="index" :class="{active:item.active === titleActive}">{{item.title}}</span>
                </div>
            </template>
            <template #other><span class="more-btn" @click="moreBtnClick()">更多>></span></template>
            <div class="section-technical-service" v-show="titleActive == 0">
                <div class="total-list" v-line>
                    <div class="total-item">
                        <div class="icon">
                            <img src="./img/task-icon1.png" alt="">
                        </div>
                        <div class="info">
                            <div class="label">测土配方服务</div>
                            <div class="value">160<span>次</span></div>
                        </div>
                    </div>
                    <div class="total-item">
                        <div class="icon">
                            <img src="./img/task-icon2.png" alt="">
                        </div>
                        <div class="info">
                            <div class="label">专家农技指导</div>
                            <div class="value">200<span>次</span></div>
                        </div>
                    </div>
                    <div class="total-item">
                        <div class="icon">
                            <img src="./img/task-icon3.png" alt="">
                        </div>
                        <div class="info">
                            <div class="label">无人机巡田</div>
                            <div class="value">10000<span>亩</span></div>
                        </div>
                    </div>
                    <div class="total-item">
                        <div class="icon">
                            <img src="./img/task-icon4.png" alt="">
                        </div>
                        <div class="info">
                            <div class="label">统防统治</div>
                            <div class="value">10000<span>亩</span></div>
                        </div>
                    </div>
                </div>
                <dp-swiper :option="{slidesPerView:4,delay:50000,autoplay:true}" :list="list" style="flex:1;min-height: 0">
                    <div style="height: 100%;" slot-scope="{ item,index }">  
                        <div class="li-item">
                            <el-image :src="item.avatar" fit="cover" style="flex: 1;margin-bottom: 0.05rem">
                                <div slot="error" class="image-slot">
                                    <img src="./img/noren.png" alt="" style="width:100%;height:100%;object-fit:cover;">
                                </div>
                            </el-image>
                            <div class="name">{{item.name}}</div>
                            <div class="classify" :title="item.classify">{{item.classify}}</div>
                        </div>
                    </div>
                </dp-swiper>
            </div>   
            <div class="section-technical-service" v-show="titleActive == 1">
                <div class="nzps-content-top" v-line>
                    <div class="nzps-top-box">
                        <span>农机维修</span>
                        <span><span>45</span>次</span>
                    </div>
                    <div class="nzps-top-box">
                        <span>农机保养</span>
                        <span><span>630</span>次</span>
                    </div>
                    <div class="nzps-top-box">
                        <span>农机销售</span>
                        <span><span>50</span>台</span>
                    </div>
                    <div class="nzps-top-box">
                        <span>配件销售</span>
                        <span><span>508</span>次</span>
                    </div>
                </div>
                <div class="njwx-bottom">
                    <top-chart v-if="titleActive == 1" :option="chartOption"></top-chart>
                </div>
            </div>
            <dialog-com :visible.sync="dialogVisible" v-bind="dialogParams"></dialog-com>
        </dp-section2>
    `,
    props: {},
    data() {
        return {
            // 头部列表
            titleList: [
                {
                    title: "农技服务",
                    active: 0
                },
                {
                    title: "农机维修",
                    active: 1
                }
            ],
            // 头部选中
            titleActive: 0,
            // 更多弹框显示隐藏
            dialogVisible: false,
            // 人员列表
            list: [
                { id: 1, name: '梁春燕', classify: '作物遗传育种', avatar: './img/ren1.png' },
                { id: 2, name: '万俊鹏', classify: '病虫害防治', avatar: './img/ren2.png' },
                { id: 3, name: '李峰', classify: '绿色高效栽培技术', avatar: './img/ren4.webp' },
                { id: 4, name: '张王元', classify: '作物遗传育种', avatar: './img/ren3.webp' },
                { id: 5, name: '刘季任', classify: '作物遗传育种', avatar: './img/ren22.webp' },
            ],
            
        };
    },
    computed: {
        
        /*图表配置*/
        chartOption() {
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: "rgba(0, 34, 39, 0.70)",
                    borderWidth: 0,
                    formatter: function (params) {
                        return `
                            <div class="chart-tootip-box">
                                <span>${params[0].name}</span>
                                <p>
                                    <span>${params[0].seriesName}：</span>
                                    <span><span style="color: #3BFBC7;">${params[0].value}</span>次</span>
                                </p>
                            </div>
                        `;
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '0',
                    right: '4%',
                    bottom: '3%',
                    top: '30',
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#fff"
                    },
                    data: ['2019年', '2020年', '2021年', '2022年', '2023年'],
                },
                yAxis: [
                    {
                        name: '单位：次',
                        type: 'value',
                        nameTextStyle: {
                            fontFamily: "SourceHanSansCNRegular",
                            color: "#3BFBC7",
                            align: "left"
                        }
                    }
                ],
                series: [
                    {
                        name: '农机维修',
                        type: 'line',
                        smooth: false,
                        data: [7, 8, 8, 11, 6],
                        barWidth: 20,
                        itemStyle: {
                            color: "#3BFBC7"
                        }
                    }
                ]
            };

            return option;
        },
        dialogParams() {
            return {
                dialogType: 'njfwnjwx-com',
                list: this.titleList,
                width: "55%"
            };
        }
    },
    watch: {},
    methods: {
        /**
         * 更多按钮点击
         */
        moreBtnClick() {
            this.dialogVisible = true;
        }
    },
    mounted() {
    }
});

/**
 * 农产品营销 | 农事研学
 * @name agricultural-product-marketing
 */
Vue.component('agricultural-product-marketing', {
    template: `
        <dp-section2 title="" height="27%"> 
            <template #left>
                <div class="title-box-left">
                    <span @click="titleActive = item.active" v-for="(item,index) in titleList" :key="index" :class="{active:item.active === titleActive}">{{item.title}}</span>
                </div>
            </template>
            <template #other>
                <span class="more-btn" @click="moreBtnClick">更多>></span>
            </template>
            <div class="monitor-device agricultural-product-marketing" v-show="titleActive == 0">
                <div class="jcsb-top" v-line>
                    <div class="jcsb-top-box">
                        <span>2<span> 个</span></span>
                        <span>农产品品牌</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>16089<span> 吨</span></span>
                        <span>水稻销量</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>10242<span> 吨</span></span>
                        <span>小麦销量</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>6213<span> 吨</span></span>
                        <span>油料销量</span>
                    </div>
                </div>
                <div class="ncpyx-bottom">
                    <div class="nzps-content-bottom">
                        <span>热销农产品</span>
                        <div class="nzps-bottom-box">
                            <div class="swiper ncpyxSwiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(item,index) in ncpyxList" :key="index + 'rxnz'"">
                                        <div class="rxnz-img">
                                            <img :src="item.img" alt="">
                                        </div>
                                        <div class="rxnz-right">
                                            <span>{{item.name}}</span>
                                            <span>{{item.company}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="monitor-device monitor-device2 agricultural-product-marketing" v-show="titleActive == 1">
                <div class="jcsb-top" v-line>
                    <div class="jcsb-top-box">
                        <span>4<span> 类</span></span>
                        <span>农事研学类型</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>206<span> 条</span></span>
                        <span>农事研学互动反馈</span>
                    </div>
                    <div class="jcsb-top-box">
                        <span>3450<span> 条</span></span>
                        <span>农业科普数据量</span>
                    </div>
                </div>
                <div class="ncpyx-bottom">
                    <div class="nzps-content-bottom">
                        <span>农事活动</span>
                        <div class="nzps-bottom-box">
                            <div class="swiper ncpyxSwiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="(item,index) in nsyxList" :key="index + 'rxnz'"">
                                        <div class="rxnz-img">
                                            <img :src="item.img" alt="">
                                        </div>
                                        <div class="rxnz-right">
                                            <span>{{item.name}}</span>
                                            <span>{{item.company}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <dialog-com :visible.sync="dialogVisible" v-bind="dialogParams"></dialog-com>
        </dp-section2>
    `,
    props: {

    },
    data() {
        return {
            // 头部列表
            titleList: [
                {
                    title: "农产品营销",
                    active: 0
                },
                {
                    title: "农事研学",
                    active: 1
                }
            ],
            // 头部选中
            titleActive: 0,
            // 弹框显示隐藏
            dialogVisible: false,
            // 农产品营销列表
            ncpyxList: [
                {
                    img: "../../resources/img/jiangshan/ncpyx-demo.png",
                    name: "农业科普活动---稻纵卷叶螟",
                    company: "江山水稻，通过江山市粮油技术团队测产验收，位于清湖街道和睦村水稻高..."
                },
                {
                    img: "../../resources/img/jiangshan/ncpyx-demo.png",
                    name: "云天牌有机肥",
                    company: "武威金仓生物科技有限公司"
                },
                {
                    img: "../../resources/img/jiangshan/ncpyx-demo.png",
                    name: "鲁西晶体尿素",
                    company: "武威金仓生物科技有限公司"
                },
                {
                    img: "../../resources/img/jiangshan/ncpyx-demo.png",
                    name: "刘记晶体尿素",
                    company: "武威金仓生物科技有限公司"
                },
            ],
            // 农事研学列表
            nsyxList: [
                {
                    img: "../../resources/img/jiangshan/ncpyx-demo.png",
                    name: "农事研学",
                    company: "武威金仓生物科技有限公司"
                },
                {
                    img: "../../resources/img/jiangshan/ncpyx-demo.png",
                    name: "事研学",
                    company: "武威金仓生物科技有限公司"
                },
                {
                    img: "../../resources/img/jiangshan/ncpyx-demo.png",
                    name: "事研学",
                    company: "武威金仓生物科技有限公司"
                },
            ],
        };
    },
    computed: {
        // 弹框参数
        dialogParams() {
            return {
                dialogType: "ncpyxnsyx-com",
                list: this.titleList
            }
        }
    },
    watch: {

    },
    methods: {
        /**
         * 点击更多
         */
        moreBtnClick() {
            this.dialogVisible = true;
        },
        /**
         * 初始化农产品营销轮播
         */
        initMcpyxSwiper() {
            var swiper = new Swiper(".ncpyxSwiper", {
                direction: "vertical",
                slidesPerView: "auto",
                spaceBetween: 10,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            });
        },
        /**
         * 初始化农事研学轮播
         */
        initNsyxSwiper() {
            var swiper = new Swiper(".nsyxSwiper", {
                direction: "vertical",
                slidesPerView: "auto",
                spaceBetween: 10,
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
            });
        }
    },
    mounted() {
        this.initMcpyxSwiper();
        this.initNsyxSwiper();
    }
});


/**
 * 汇总展示列表
 * @name center-totol-list
 */
Vue.component('center-totol-list', {
    template: `
        <div class="center-totol-list">
            <div class="li-item">
                <div class="label">
                    <div class="icon"><img src="./img/total-icon1.png" alt=""></div>
                    <span>本年农事预约（次）/好评</span>
                </div>
                <div class="value">
                    <strong>1160</strong>
                    <p>
                        <span>次</span>
                        <span>/</span>
                    </p>
                    <strong>98</strong>
                    <p>%</p>
                </div>
            </div>
            <div class="li-item">
                <div class="label">
                    <div class="icon"><img src="./img/total-icon2.png" alt=""></div>
                    <span>本年农技服务（次）/好评</span>
                </div>
                <div class="value">
                    <strong>360</strong>
                    <p>
                        <span>次</span>
                        <span>/</span>
                    </p>
                    <strong>97.5</strong>
                    <p>%</p>
                </div>
            </div>
            <div class="li-item">
                <div class="label">
                    <div class="icon"><img src="./img/total-icon3.png" alt=""></div>
                    <span>本年农机调度（次）/好评</span>
                </div>
                <div class="value">
                    <strong>600</strong>
                    <p>
                        <span>次</span>
                        <span>/</span>
                    </p>
                    <strong>98.5</strong>
                    <p>%</p>
                </div>
            </div>
        </div>       
    `,
    props: {},
    data() {
        return {
            list: [],
        };
    },

    watch: {},

    methods: {},

    mounted() {
    }
});

/**
 * swiper-table封装
 */
Vue.component('dp-swiper-table', {
    template: `
        <div class="dp-swiper-table">
            <div class="swiper-table__header" v-show="showHead">
                <slot name="table-header">
                    <div class="header-item" :style="headerItemStyle(item)" v-for="item of column">{{item.title}}</div>
                </slot>
            </div>
            <div class="swiper-table__body">
                <div class="swiper" :id="this.uuid" >
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item, index) in list" :key="item.id || index">
                            <slot :item="item" :index="index"></slot>
                        </div>
                    </div>
                </div>
                <dp-no-data v-else></dp-no-data>
            </div>
        </div>
    `,
    props: {
        /*表格的结构信息*/
        column: { type: Array },
        showHead: { type: Boolean, default: true },

        option: { type: Object, default: () => ({}) },
        list: { type: Array, default: () => [] }
    },
    data() {
        return {
            swiper: null,
            uuid: '',
        }
    },

    computed: {},

    watch: {
        list: {
            handler(val) {
                this.$nextTick(() => {
                    this.swiper && this.swiper.update(true);
                })
            },
            deep: true
        },
    },

    methods: {
        initSwiper() {
            const option = {
                direction: "vertical",
                slidesPerView: 3,
                spaceBetween: 0,
                autoplay: {
                    pauseOnMouseEnter: true,
                    disableOnInteraction: false,
                },
            }
            this.swiper = new Swiper(`#${this.uuid}`, { ...option, ...this.option });
        },


        headerItemStyle(item) {
            const { style } = item;
            return {
                ...style
            }
        }


    },
    created() {
        this.uuid = tpUtils.uuidGenerate('swiper_');
    },
    mounted() {
        this.$nextTick(() => {
            this.initSwiper();
        })
    },
});

/**
 * swiper封装
 */
Vue.component('dp-swiper', {
    template: `
        <div class="dp-swiper" :class="this.uuid">
            <div class="swiper-btn-prev swiper-btn">
                <img src="../../resources/img/dp-mark-dialog/dialog-swiper-pre.png" alt="左按钮" v-show="showArrow">
            </div>
            <div class="swiper" :id="this.uuid">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item, index) in list" :key="item.id || index">
                        <slot :item="item" :index="index"></slot>
                    </div>
                </div>
            </div>
            <div class="swiper-btn-next swiper-btn">
                <img src="../../resources/img/dp-mark-dialog/dialog-swiper-next.png" alt="右按钮" v-show="showArrow">
            </div>
        </div>
    `,
    props: {
        option: { type: Object, default: () => ({}) },
        list: { type: Array, default: () => [] }
    },
    data() {
        return {
            swiper: null,
            uuid: '',
        }
    },

    computed: {
        showArrow() {
            const slidesPerView = this.option.slidesPerView || 4;
            if (this.list.length > 0 && this.list.length > slidesPerView) {
                return true;
            }
            return false
        }
    },

    watch: {
        list: {
            handler(val) {
                this.$nextTick(() => {
                    this.swiper && this.swiper.update(true);
                })
            },
            deep: true
        },
    },
    methods: {
        initSwiper() {
            const that = this;
            const { delay = 5000, autoplay } = this.option;
            const option = {
                slidesPerView: this.option.slidesPerView,
                spaceBetween: 15,
                loop: false,
                autoplay: autoplay === false ? false : {
                    pauseOnMouseEnter: true,
                    disableOnInteraction: false,
                    delay: delay
                },
                navigation: {
                    nextEl: `.${this.uuid} .swiper-btn-next`,
                    prevEl: `.${this.uuid} .swiper-btn-prev`,
                },
                on: {
                    slideChange: function () {
                        that.$emit('active-index', this.activeIndex)
                    },
                },
            }
            this.swiper = new Swiper(`#${this.uuid}`, { ...option, ...this.option });
        },
    },
    created() {
        this.uuid = uuidGenerate('swiper_');
    },
    mounted() {
        this.$nextTick(() => {
            this.initSwiper();
        })
    },
});

